<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>馆藏图书</title>
    <!--  引入核心皮肤-->
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <!--   引入核心js-->
    <script src="../../layui/layui.js"></script>
    <script>
        layui.use(['layer', 'jquery', 'table', 'form'], function () {
            let layer = layui.layer;//定义组件
            let $ = layui.jquery;//定义组件
            let table = layui.table;//定义表格组件
            let form = layui.form;//定义表格组件
            table.render({
                elem: '#dg',
                url: '../../choice/selectByPaper',
                page: true,//开启分页
                method: "post",
                parseData: function (res) {
                    return {
                        "code": 0,
                        "msg": "",
                        "count": 1000,
                        "data": res
                    }
                },
                cols: [[ //表头
                    {field: 'chid', title: '选择题id', type: 'checkbox'}
                    , {field: 'chquestion', title: '选择题题干'}
                    , {field: 'chquestiona', title: '选择题a'}
                    , {field: 'chquestionb', title: '选择题b'}
                    , {field: 'chquestionc', title: '选择题c'}
                    , {field: 'chquestiond', title: '选择题d'}
                    , {field: 'chanswer', title: '选择题答案'}
                    , {field: 'check', title: '解析'}
                    , {field: 'subject', title: '科目'}
                ]]
            })

            //条件查询
            $("#btn-search").click(function () {
                table.reload('dg', {
                    where: {
                        chquestion: $("#chquestion").val(),
                        subject: $("#subject").val()
                    }
                })
            })
            // $("#btn-search").click(function () {
            //     table.reload('dg',{
            //         where :{
            //             chquestion:$("#chquestion").val(),
            //             subject:$("#subject").val()
            //         }
            //     })
            // })

            //删除操作
            $("#btn-remove").click(function () {
                let array = table.checkStatus('dg').data;
                if (array.length == 0) {
                    layer.msg('请选择要修改的数据');
                } else if (array.length > 1) {
                    layer.msg('只能选择一条记录进行修改')
                } else {
                    $.post('../../choice/deleteOne/' + array[0].chid, function (flag) {
                        if (flag) {
                            layer.msg('操作成功', {icon: 6});
                            table.reload('dg');//刷新表格
                        } else {
                            layer.msg('操作成失败', {icon: 5});
                        }
                    })

                }
            })

            //添加
            $("#btn-add").click(function () {
                layer.open({
                    title: '添加一道选择题',
                    type: 1,
                    content: $("#add-dialog").html(),
                    area: ['600px']
                })
                form.render();//渲染表单组件的，如果组件不出来可以调用该方法进行重新渲染

                // //调用初始化下拉列表方法add-select-option
                // $.post('../../category/findAllCategory',function (data) {
                //     for(let i in data){
                //         $("#add-select-option").append('<option value="'+data[i].cateid+'">'+data[i].catename+'</option>');
                //     }
                //     form.render();//渲染表单组件的，如果组件不出来可以调用该方法进行重新渲染
                // })

                //监听添加提交表单
                form.on('submit(add-form-submit)', function (data) {
                    $.post('../../choice/insertOne', data.field, function (flag) {
                        if (flag) {
                            layer.msg('添加题目信息成功', {icon: 6});
                            table.reload("dg");//刷新表格
                            layer.closeAll('page');//关闭当前对话框
                        } else {
                            layer.msg('添加题目信息失败', {icon: 5});
                        }
                    })

                    return false;//阻止表单提交action属性的值

                })

            })

            //修改
            $("#btn-edit").click(function () {
                let array = table.checkStatus('dg').data;
                if (array.length == 0) {
                    layer.msg('请选择要修改的数据');
                } else if (array.length > 1) {
                    layer.msg('只能选择一条记录进行修改')
                } else {
                    //弹出修改对话框
                    layer.open({
                        title: '修改图书信息',
                        type: 1,
                        content: $("#edit-dialog").html(),
                        area: ['600px']
                    })
                    form.val('load-edit-form-data', {
                        chquestion: array[0].chquestion,
                        chanswer: array[0].chanswer,
                        chquestiona: array[0].chquestiona,
                        chquestionb: array[0].chquestionb,
                        chquestionc: array[0].chquestionc,
                        chquestiond: array[0].chquestiond,
                        subject: array[0].subject,
                        check: array[0].check,
                        chid: array[0].chid
                    })
                    form.render();//重新渲染表单组件，组件就可以显示页面中
                    //在此编写ajax代码，请求后端进行修改操作
                    form.on('submit(edit-form-submit)', function (data) {
                        $.post('../../choice/update', data.field, function (flag) {
                            if (flag) {
                                layer.msg('修改题目成功', {icon: 6});
                                layer.closeAll('page');
                                table.reload('dg');
                            } else {
                                layer.msg('修改题目失败', {icon: 6});
                            }
                        })
                        return false;//阻住提交表单标签action属性值
                    })
                }
            })

        })

    </script>
    <!--  定义一个添加对话框，借助js代码在浏览器解析时不会显示js内容-->
    <script id="add-dialog" type="text/html">
        <form class="layui-form" id="add-form">
            <div class="layui-form-item">
                <input type="text" name="chquestion" required lay-verify="required"
                       placeholder="请输入题干" class="layui-input">
            </div>
            <div class="layui-form-item">
                <input type="text" name="chquestiona" required lay-verify="required"
                       placeholder="请输入A选项" class="layui-input">
            </div>
            <div class="layui-form-item">
                <input type="text" name="chquestionb" required lay-verify="required"
                       placeholder="请输入B选项" class="layui-input">
            </div>
            <div class="layui-form-item">
                <input type="text" name="chquestionc" required lay-verify="required"
                       placeholder="请输入C选项" class="layui-input">
            </div>
            <div class="layui-form-item">
                <input type="text" name="chquestiond" required lay-verify="required"
                       placeholder="请输入D选项" class="layui-input">
            </div>
            <div class="layui-form-item" placeholder="请输入答案">
                <input type="radio" name="chanswer" value="A" title="选A">
                <input type="radio" name="chanswer" value="B" title="选B" checked>
                <input type="radio" name="chanswer" value="C" title="选C">
                <input type="radio" name="chanswer" value="D" title="选D">
            </div>
            <div class="layui-form-item">
                <input type="text" name="subject" required lay-verify="required"
                       placeholder="请输入科目" class="layui-input">
            </div>
            <div class="layui-form-item">
                <textarea name="check" placeholder="请输入解析" class="layui-textarea"></textarea>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="add-form-submit">保存</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </script>

    <!--  定义一个修改对话框-->
    <script id="edit-dialog" type="text/html">
        <form class="layui-form" id="edit-form" lay-filter="load-edit-form-data">
            <div class="layui-form-item">
                <input type="text" name="chquestion" required lay-verify="required"
                       placeholder="请输入题干" class="layui-input">
                <input type="hidden" name="chid" class="layui-input">
            </div>
            <div class="layui-form-item">
                <input type="text" name="chquestiona" required lay-verify="required"
                       placeholder="请输入A选项" class="layui-input">
            </div>
            <div class="layui-form-item">
                <input type="text" name="chquestionb" required lay-verify="required"
                       placeholder="请输入B选项" class="layui-input">
            </div>
            <div class="layui-form-item">
                <input type="text" name="chquestionc" required lay-verify="required"
                       placeholder="请输入C选项" class="layui-input">
            </div>
            <div class="layui-form-item">
                <input type="text" name="chquestiond" required lay-verify="required"
                       placeholder="请输入D选项" class="layui-input">
            </div>
            <div class="layui-form-item" placeholder="请输入答案">
                <input type="radio" name="chanswer" value="A" title="选A">
                <input type="radio" name="chanswer" value="B" title="选B" checked>
                <input type="radio" name="chanswer" value="C" title="选C">
                <input type="radio" name="chanswer" value="D" title="选D">
            </div>
            <div class="layui-form-item">
                <input type="text" name="subject" required lay-verify="required"
                       placeholder="请输入科目" class="layui-input">
            </div>
            <div class="layui-form-item">
                <textarea name="check" placeholder="请输入解析" class="layui-textarea"></textarea>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="edit-form-submit">保存</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </script>
</head>
<body>

<div class="demoTable">
    <div class="layui-inline">
        <input class="layui-input" id="chquestion" placeholder="请输入题干">
    </div>
    <div class="layui-inline">
        <input class="layui-input" id="subject" placeholder="请输入科目">
    </div>
    <button class="layui-btn" id="btn-search"><i class="layui-icon">&#xe615;</i>查询</button>
    <button class="layui-btn layui-btn-normal" id="btn-add"><i class="layui-icon">&#xe624;</i>添加</button>
    <button class="layui-btn layui-btn-warm" id="btn-edit"><i class="layui-icon">&#xe642;</i>修改</button>
    <button class="layui-btn layui-btn-danger" id="btn-remove"><i class="layui-icon">&#xe640;</i>删除</button>
</div>
<table id="dg"></table>
</body>
</html>